<style lang="less">
    .modal-box img{
        width: 600px;
    }
</style>

<template>
    <Card>
        <p slot="title">
            <Breadcrumb>
                <BreadcrumbItem to="/dashboard/index"><Icon type="ios-home-outline"></Icon> 首页</BreadcrumbItem>
                <BreadcrumbItem to="/user/list"><Icon type="ios-list"></Icon> 会员管理</BreadcrumbItem>
                <BreadcrumbItem to="/user/list"><Icon type="ios-copy-outline"></Icon> 会员列表</BreadcrumbItem>
            </Breadcrumb>
        </p>
        <Form class="step-form" ref="searchForm" :model="searchForm" :rules="searchFormRules" :label-width="100">
            <Row>
                <Col span="6">
                <FormItem label="手机号：" prop="moble">
                    <Input :disabled="hasSubmit" v-model="searchForm.moble" placeholder="输入手机号"></Input>
                </FormItem>
                </Col>
                <Col span="7">
                <Row>
                    <Col span="12">
                    <FormItem label="注册时间：" prop="date_s">
                        <DatePicker :disabled="hasSubmit" type="date" placeholder="开始时间" prop="date_s" v-model="searchForm.date_s"></DatePicker>
                    </FormItem>

                    </Col>
                    <Col span="1" style="text-align: center">-</Col>
                    <Col span="7">
                    <FormItem :label-width="1" prop="date_e">
                        <DatePicker :disabled="hasSubmit" type="date" placeholder="结束时间" prop="date_e" v-model="searchForm.date_e"></DatePicker>
                    </FormItem>
                    </Col>
                </Row>
                </Col>
            </Row>
            <Row>
                <Row>
                    <Col span="6">
                    <FormItem label="姓名：" prop="nick_name">
                        <Input :disabled="hasSubmit" v-model="searchForm.nick_name" placeholder="输入姓名"></Input>
                    </FormItem>
                    </Col>
                    <Col span="6">
                    <FormItem label="用户ID：" prop="user_id">
                        <Input :disabled="hasSubmit" v-model="searchForm.user_id" placeholder="输入ID"></Input>
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem>
                        <Button type="primary" :disabled="hasSubmit" @click="handleSubmit('searchForm')" :loading="searchBrnLoading" icon="search">查询</Button>
                        <Button type="ghost" @click="handleReset('searchForm')" style="margin-left: 8px">重置</Button>
                        <!--<Button type="success" @click="handleToEditPage()" style="float: right">文章录入</Button>-->
                    </FormItem>
                    </Col>
                </Row>
            </Row>
        </Form>
        <ButtonGroup v-if="this.tableSelects.length>0">
            <Poptip
                    confirm
                    title="确认全部隐藏吗？"
                    @on-ok="handeHide(1)"
            >
                <Button>全部隐藏</Button>
            </Poptip>
            <Poptip
                    confirm
                    title="确认全部显示吗？"
                    @on-ok="handeHide(0)"
            >
                <Button>全部显示</Button>
            </Poptip>
        </ButtonGroup>
        <Table
                border
                ref="selection"
                :columns="columns"
                :data="list"
                :loading="loading"
                @on-selection-change="this.selectRow"
        ></Table>
        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page
                        :total="total"
                        :current="current"
                        :page-size="pageSize"
                        :show-elevator="true"
                        :page-size-opts="[12, 20, 30, 40]"
                        :show-sizer="true"
                        @on-change="changePage"
                        @on-page-size-change="changePageSize"
                ></Page>
            </div>
        </div>
        <Modal v-model="modalUp" width="400" @on-cancel="handleReset('formUp')">
            <p slot="header" style="text-align:center">
                <span>会员信息</span>
            </p>
            <div>
                <Form ref="formUp" :model="formUp" :rules="ruleUp" :label-width="80">
                    <FormItem label="微信昵称" prop="wechat">
                        <span>{{formUp.wechat}}</span>
                    </FormItem>
                    <FormItem label="手机号" prop="moble">
                        <span>{{formUp.moble}}</span>
                    </FormItem>
                    <FormItem>
                        <Button type="ghost" @click="handleCance">取消</Button>
                        <Button type="primary" @click="handleSubmit('formUp')" icon="checkmark-round" :disabled="disabled" style="margin-left: 8px">确认开通</Button>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer" style="text-align: center;">
                <!--<Button type="success" size="large" long :loading="modal_loading" @click="savepwd">修改</Button>-->
            </div>
        </Modal>
        <Modal v-model="modalEditmoble" width="660" @on-cancel="handleReset('formEditmoble')">
            <p slot="header" style="text-align:center">
                <span>手机号：{{this.curMoble}}</span>
            </p>
            <div style="text-align:center">
                <Form ref="formEditmoble" :model="formEditmoble" :rules="ruleEditmoble" :label-width="80">
                    <FormItem label="新手机号" prop="moble">
                        <Input type="text" v-model="formEditmoble.moble"></Input>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="handleSubmit('formEditmoble')" icon="checkmark-round">确认修改</Button>
                        <Button type="ghost" @click="handleReset('formEditmoble')" style="margin-left: 8px">重新填写</Button>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer" style="text-align: center;"></div>
        </Modal>
    </Card>
</template>
<script>
    import Cookies from 'js-cookie';
    import Util from '../../libs/util';
    import moment from 'moment';

    export default {
        data () {
            return {
                columns: [
                    // {
                    //     type: 'selection',
                    //     key: 'user_id',
                    //     width: 60,
                    //     align: 'center'
                    // },
                    {
                        title: 'ID',
                        align: 'center',
                        width: 60,
                        key: 'user_id'
                    },
                    {
                        title: '头像',
                        key: 'head_img',
                        width: 70,
                        render: (h, params) => {
                            return h('Avatar', {
                                attrs: {
                                    src: params.row.head_img
                                }
                            });
                        }
                    },
                    {
                        title: '微信昵称',
                        key: 'nick_name'
                    },
                    {
                        title: '手机号',
                        key: 'moble'
                    },
                    {
                        title: '微信号',
                        key: 'wechat'
                    },
                    {
                        title: '可提现积分',
                        key: 'point'
                    },
                    // {
                    //     title: '冻结积分',
                    //     key: 'f_point'
                    // },
                    // {
                    //     title: '总业绩',
                    //     key: 'use_money_total'
                    // },
                    {
                        title: '注册时间',
                        key: 'create_time',
                        render: (h, params) => {
                            return h('div', Util.formatDate(params.row.create_time));
                            // console.log(params.row.create_time);
                            // return h('div', moment(params.row.create_time).format('YYYY-MM-DD'));
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 160,
                        align: 'center',
                        render: (h, params) => {
                            if (this.adminType !=3) {
                                return;
                            }
                            return h('div', [
                                h('Button', {
                                    props: {
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index, params.row.is_hide);
                                        }
                                    }
                                }, '开通实体店')
                            ]);
                        }
                    }
                ],
                list: [],
                total: 0,
                current: this.$route.params.page ? this.$route.params.page : 1,
                pageSize: 12,
                loading: true,
                adminType: Cookies.get('admin_type'),
                searchForm: {
                    moble: '',
                    date_s: '',
                    date_e: '',
                    nick_name: '',
                    user_id: ''
                },
                searchFormRules: {
                },
                hasSubmit: false,
                tableSelects: [],
                searchBrnLoading: false,
                modalUp: false,
                upMoble: '',
                upUserid: '',
                formUp: {
                    open_id: '',
                    moble: '18822223333',
                    wechat: 'wechat'
                },
                ruleUp: {},
                modalEditmoble: false,
                curMoble: '',
                editUserid: '',
                formEditmoble: {
                    moble: ''
                },
                ruleEditmoble: {
                    moble: [
                        { required: true, message: '必须输入手机号码', trigger: 'blur' },
                        { length: 11, message: '手机号错误', trigger: 'blur' }
                    ]
                },
                disabled: false
            };
        },
        mounted: function () {
            this.$nextTick(function () {
                const $params = {page: this.current};
                this.getList($params);
            });
        },
        methods: {
            getList: function (params) {
                let p = {
                    ...params,
                    user_type: 1
                }
                Util.ajax.post(`/adminapi/user/list`, p).then(response => {
                    this.list = response.data.data.list;
                    this.total = response.data.data.total;
                    this.current = response.data.data.current;
                    this.pageSize = response.data.data.pageSize;
                    this.loading = false;
                    this.hasSubmit = false;
                });
                this.searchBrnLoading = false;
            },
            selectRow (selection, row) {
                this.tableSelects = selection;
            },
            show (index) {
                this.modalUp = true;
                this.upMoble = this.list[index].moble;
                this.upUserid = this.list[index].user_id;
            },
            editMoble (index) {
                this.modalEditmoble = true;
                this.curMoble = this.list[index].moble;
                this.editUserid = this.list[index].user_id;
            },
            remove (index) {
                this.data6.splice(index, 1);
            },
            changePage (e) {
                this.loading = true;
                const params = {page: e, pageSize: this.pageSize};
                this.list = this.getList(params);
            },
            changePageSize (e) {
                this.loading = true;
                const params = {page: 1, pageSize: e};
                this.list = this.getList(params);
            },
            handleCance () {
                this.modalUp = false;
            },
            handleSubmit (name) {
                this.searchBrnLoading = true;
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.disabled = true;
                        if(name == 'formUp') {
                            this.userUp(this.upUserid, this.formUp);
                        } else if (name == 'formEditmoble') {
                            this.editMobel(this.editUserid, this.formEditmoble);
                        } else {
                            this.hasSubmit = true;
                            let params = {
                                ...this.searchForm,
                                page: 1,
                                pageSize: this.pageSize
                            };
                            params.date_s = params.date_s ? moment(params.date_s).format('X'): '';
                            params.date_e = params.date_e ? moment(params.date_e).subtract(-1, "days").format('X'): '';
                            this.getList(params);
                        }
                    } else {
                        this.searchBrnLoading = false;
                    }
                });
            },
            handleReset (name) {
                this.$refs[name].resetFields();
                this.hasSubmit = false;
                this.getList();
            },
            userUp (user_id, chargeobj) {
                let _this = this;
                Util.ajax.post(`/adminapi/user/up`, {user_id: user_id, to_user_type: 2}).then(response => {
                    this.disabled = false;
                    if(response.data.code==0) {
                        const params = {page: this.current, pageSize: this.pageSize};
                        this.getList(params);
                        this.$Message.success('充值成功');
                        this.modalUp = false;
                        this.formUp.charge_num = '';
                        this.formUp.amount = '';
                        this.upUserid = '';
                    }else {
                        this.$Message.error(response.data.msg);
                    }
                }) .catch(function (error) {
                    this.disabled = false;
                    _this.$Message.error('网络请求失败');
                });
            },
            editMobel (user_id, editObj) {
                let _this = this;
                Util.ajax.post(`/adminapi/user/editmoble`, {user_id: user_id, moble: editObj.moble}).then(response => {
                    this.disabled = false;
                    if(response.data.code==0) {
                        const params = {page: this.current, pageSize: this.pageSize};
                        this.getList(params);
                        this.$Message.success('修改成功');
                        this.modalEditmoble = false;
                        this.formEditmoble.moble = '';
                        this.editUserid = '';
                    }else {
                        this.$Message.error(response.data.msg);
                    }
                }) .catch(function (error) {
                    this.disabled = false;
                    _this.$Message.error('网络请求失败');
                });
            }
        }
    };
</script>
